import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { useUpdateEffect } from '@umijs/hooks';
import {
  Tooltip,
  Row,
  Col,
  Card,
  Form,
  Input,
  Icon,
  Tabs,
  Button,
  Table,
  Modal,
  message,
  Select,
  Divider,
  DatePicker,
} from 'antd';
import SlickTable from '@/components/SlickTable';
import useSlickTable from '@/hooks/useSlickTable';
import Link from 'umi/link';
import request from '@/utils/request';

const { RangePicker } = DatePicker;

const { Option } = Select;
const FormItem = Form.Item;

// 判断空对象
const isEmptyObject = value => {
  for (let key in value) {
    return false;
  }
  return true;
};

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

const namespace = 'formFunctionConf';

function FormFunctionConfList(props) {
  const { getFieldDecorator } = props.form;
  const [params, setParams] = useState({});
  const [regionList, setRegionList] = useState([]);
  const [tempRegion, setTempRegion] = useState({});
  const [countyList, setCountyList] = useState([]);
  const [tempCounty, setTempCounty] = useState({});
  const [regionDisabled, setRegionDisabled] = useState(false);
  const [areaDisabled, setAreaDisabled] = useState(false);

  // 初始化
  useEffect(() => {
    console.log('hhhhhh');
    // initRegion();
  }, []);

  // 通过dva存当前需要传递的数据
  const saveSelectRecord = params => {
    const { dispatch } = props;
    dispatch({
      type: `${namespace}/saveSelectRecord`,
      payload: params,
    });
  };

  // 初始化表格数据
  const { tableProps } = useSlickTable(
    {
      pageSize: 10,
      pageNum: 1,
    },
    'pmc/pcms/formFunctionConf/queryPage',
    params
  );

  // 表单重置
  const handleResetForm = () => {
    props.form.setFieldsValue({
      regionId: '',
      countyId: '',
      supportType: '',
      statusCd: '',
    });
    setCountyList([]);
    props.form.resetFields(); // 这是重置为默认值
    initRegion();
  };

  // 输入条件查询
  const handleQueryData = () => {
    const formData = props.form.getFieldsValue();
    if (
      props.form.getFieldsValue().createDate != undefined &&
      props.form.getFieldsValue().createDate.length > 0
    ) {
      const start = props.form.getFieldsValue().createDate[0]._d;
      const end = props.form.getFieldsValue().createDate[1]._d;
      formData.startCreateDate =
        start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
      formData.endCreateDate = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate();
    }
    formData.pageSize = 10;
    formData.pageNum = 1;
    formData.gb_reset = true;
    setParams(formData);
  };

  const handleFormAdd = () => {
    const { goToStep } = props;
    goToStep(2);
  };

  const handleDoubleClickRows = record => {};

  const cellStyle = {
    maxWidth: 200,
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    cursor: 'pointer',
  };

  const columns = [
    {
      title: '归属地市',
      dataIndex: 'regionName',
    },
    {
      title: '归属市县',
      dataIndex: 'areaName',
    },
    {
      title: '申请单编号',
      dataIndex: 'taskCode',
    },
    {
      title: '申请单名称',
      dataIndex: 'taskName',
      onCell: () => {
        return {
          style: cellStyle,
        };
      },
      render: text => (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      ),
    },
    {
      title: '申请支撑类型',
      dataIndex: 'supportTypeName',
    },
    {
      title: '申请单进度',
      dataIndex: 'statusCdName',
    },
    {
      title: '当前环节',
      dataIndex: 'flowNodeName',
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',
      onCell: () => {
        return {
          style: cellStyle,
        };
      },
      render: text => (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      ),
    },
    {
      title: '项目编码',
      dataIndex: 'projectCode',
    },
    {
      title: '集团名称',
      dataIndex: 'custName',
      onCell: () => {
        return {
          style: cellStyle,
        };
      },
      render: text => (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      ),
    },
    {
      title: '集团编码',
      dataIndex: 'custCode',
    },
    {
      title: '申请人',
      dataIndex: 'createStaffName',
    },
    {
      title: '申请时间',
      dataIndex: 'createDate',
    },
    {
      title: '操作',
      render: (text, record) => {
        return (
          <span>
            <a
              onClick={() => {
                handleDoubleClickRows(record);
              }}
            >
              详情
            </a>
          </span>
        );
      },
    },
  ];

  return (
    <div>
      <div style={{ display: props.display }}>
        <Card
          title="功能开发及配置需求"
          className="cute"
          extra={
            <Button className="margin-left" type="primary" onClick={handleFormAdd}>
              新增申请
            </Button>
          }
        >
          <Form style={{ marginBottom: 10 }}>
            <Row>
              <Col span={6}>
                <FormItem label="归属地市" {...formItemLayout}>
                  {getFieldDecorator('regionId')(
                    <Select
                      placeholder="请选择归属地市"
                      style={{ width: '100%' }}
                      showSearch
                      allowClear={true}
                      // onChange={handleGetCounty}
                      disabled={regionDisabled}
                    >
                      {isEmptyObject(tempRegion) ? (
                        regionList.length ? (
                          regionList.map(item => {
                            return (
                              <Select.Option value={item.countyId} key={item.countyId}>
                                {item.countyName}
                              </Select.Option>
                            );
                          })
                        ) : null
                      ) : (
                        <Select.Option value={tempRegion.regionId} key={tempRegion.regionId}>
                          {tempRegion.regionName}
                        </Select.Option>
                      )}
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem label="归属县市" {...formItemLayout}>
                  {getFieldDecorator('areaId')(
                    <Select
                      placeholder="请选择归属区县"
                      style={{ width: '100%' }}
                      showSearch
                      allowClear={true}
                      disabled={areaDisabled}
                    >
                      {isEmptyObject(tempCounty) ? (
                        countyList.length ? (
                          countyList.map(item => {
                            return (
                              <Select.Option value={item.countyId} key={item.countyId}>
                                {item.countyName}
                              </Select.Option>
                            );
                          })
                        ) : null
                      ) : (
                        <Select.Option value={tempCounty.countyId} key={tempCounty.countyId}>
                          {tempCounty.countyName}
                        </Select.Option>
                      )}
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem label="申请支撑类型" {...formItemLayout}>
                  {getFieldDecorator('supportType')(
                    <Select
                      placeholder="请选择申请支撑类型"
                      style={{ width: '100%' }}
                      showSearch
                      allowClear={true}
                    >
                      {/* {supportTypeList.length
                        ? supportTypeList.map(item => {
                          return (
                            <Option value={item.value} key={item.value}>
                              {item.name}
                            </Option>
                          );
                        })
                        : null} */}
                    </Select>
                  )}
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem label="申请单进度" {...formItemLayout}>
                  {getFieldDecorator('statusCd')(
                    <Select
                      placeholder="请选择申请单进度"
                      style={{ width: '100%' }}
                      showSearch
                      allowClear={true}
                    >
                      {/* {taskProgress.length
                        ? taskProgress.map(item => {
                          return (
                            <Option value={item.value} key={item.value}>
                              {item.name}
                            </Option>
                          );
                        })
                        : null} */}
                    </Select>
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={6}>
                <FormItem label="申请单编号" {...formItemLayout}>
                  {getFieldDecorator('taskCode')(<Input placeholder="" />)}
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem label="申请单名称" {...formItemLayout}>
                  {getFieldDecorator('taskName')(<Input placeholder="" />)}
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem label="项目编码" {...formItemLayout}>
                  {getFieldDecorator('projectCode')(<Input placeholder="" />)}
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem label="项目名称" {...formItemLayout}>
                  {getFieldDecorator('projectName')(<Input placeholder="" />)}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={6}>
                <FormItem label="集团编码" {...formItemLayout}>
                  {getFieldDecorator('custCode')(<Input placeholder="" />)}
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem label="集团名称" {...formItemLayout}>
                  {getFieldDecorator('custName')(<Input placeholder="" />)}
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem label="申请人" {...formItemLayout}>
                  {getFieldDecorator('taskStaffName')(<Input placeholder="" />)}
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem label="申请时间" {...formItemLayout}>
                  {getFieldDecorator('createDate')(
                    <RangePicker
                      style={{ width: '100%' }}
                      mode="time"
                      showTime
                      enable
                      format="YYYY-MM-DD"
                    />
                  )}
                </FormItem>
              </Col>
            </Row>
            <div style={{ textAlign: 'center' }}>
              <Button
                type="primary"
                className="margin-right"
                onClick={() => {
                  handleQueryData();
                }}
              >
                查询
              </Button>
              <Button type="default" onClick={handleResetForm}>
                重置
              </Button>
            </div>
          </Form>
          <SlickTable
            rowKey={record => record.execId}
            columns={columns}
            {...tableProps}
            scroll={{ x: 'max-content' }}
            onRow={record => {
              return {
                onDoubleClick: () => {
                  handleDoubleClickRows(record);
                },
              };
            }}
          />
        </Card>
      </div>
      <div style={{ display: props.display == 'block' ? 'none' : 'block' }}>
        {/* {getChild(props.childType)} */}
      </div>
      {/* <AfterSaleAddDrawer drawerFlag={props.drawerFlag} /> */}
    </div>
  );
}

export default connect(({ formFunctionConf, setting }) => ({}))(
  Form.create()(FormFunctionConfList)
);
